<!doctype html>
<html>
<head>
	<!--
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script src="{{ url_for('static',filename='js/main.js') }}"></script>
</head>

<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/leftNav')
			</script>

		<div class="righthtml">
			
			<div class="mine_center">
				<div class="mine_center_left">
					<div class="center_left_bottom">
						<table class="table table-striped">
							<caption><center>DIET</center></caption>
							<thead class="thead-dark">
								<tr>
								<th scope="col">Food Name</th>
								<th scope="col">Calories</th>
								<th scope="col">Weight</th>
								<th scope="col">Date</th>
								</tr>
							</thead>
							<tbody>
								{% for row in data %}
								<tr>
									<!-- <td>{{row}}</td> -->
									<td>{{ row[1] }}</td>
									<td>{{ row[2] }}</td>
									<td>{{ row[3] }}</td>
									<td>{{ row[4] }}</td>
								</tr>
								{% endfor %}
							</tbody>

							
    					</table>
					</div>
                    <h2>Input your today diet.</h2>
			        <div>
				        <div class="row" style="margin-top:20pt;">
					        <div class="col-lg-5">
					            <div class="input-group">
						            <span class="input-group-addon">Food Name</span> <!--140-->
						            <input type="test" class="form-control" aria-label="..." id ='fname'>
					                </div><!-- /input-group -->
                            </div><!-- /.col-lg-6 -->
                            <span id ='fnSpan' class="col-lg-1" ></span>

					        <div class="col-lg-5">
					            <div class="input-group">
                                    <span class="input-group-addon">Calories</span><!--90-->
						            <input type="number" class="form-control" aria-label="..." id ='calories'>
						            <span class="input-group-addon">kcal</span>
					            </div><!-- /input-group -->
					        </div><!-- /.col-lg-6 -->
                            <span id ='calSpan' class="col-lg-1" ></span>
				        </div><!-- /.row -->

				        <div class="row" style="margin-top:20pt;">
					        <div class="col-lg-5">
					            <div class="input-group">
						            <span class="input-group-addon">Weight</span>
						            <input type="number" class="form-control" aria-label="..." id ='weight'><!--3.9-7.8-->
						            <span class="input-group-addon">kg</span>
					            </div><!-- /input-group -->
					        </div><!-- /.col-lg-6 -->
        					<span id ='weightSpan' class="col-lg-1" ></span>

    					    <div class="col-lg-5">
                                <div class="input-group">
						            <span class="input-group-addon">Date</span>
						            <input type="date" class="form-control" aria-label="..." id ='date'><!--1.8-3.4-->
					            </div><!-- /input-group -->
					        </div><!-- /.col-lg-6 -->
        					<span id ='dateSpan' class="col-lg-1" ></span>
        				</div><!-- /.row -->
                    </div>
                    <div style="width: 100%; text-align: center; margin-top: 40pt;">
				        <button class="btn btn-primary" style="width: 100pt;" onclick="updateDiets();" id ='subdiet'>Submit</button>
			        </div>

				</div>
				
			</div>
		</div>
	</div>
</body>
<script>
	// 初始化为1，正确后加起来为0
var sbpFlag=1
var dbpFlag=1
var glucoseFlag=1
var cholesterolFlag=1
var SaO2Flag=1
function logout(){
	$.ajax({
			url: "/VitalSigns/logout", 
			type: "POST",  
			data: {
			},
			success: function (result) {
				if (result.message == "success!") {
				
					alert("Logout！");
					location.href="/Login/";
				}
				else {
					alert(result.message)
				}
			}
		});
}
	function updateDiets() {
		if( !($("#fname").val() && $("#calories").val() && $("#weight").val() && $("#date").val())){
			alert('please fill all the input boxes!')
			return;
		}

		$("#subdiet").text("Waiting...")
		$("#subdiet").attr("disabled", true);
		$.ajax({
			url: "/Diet/updateDiets", 
			type: "POST",  
			data: {
				"fname": $("#fname").val(),
				"calories": $("#calories").val(),
				"weight": $("#weight").val(),
				"date": $("#date").val(),
			},
			success: function (result) {
				if (result.message == "success!") {
					$("#subdiet").text("Submit")
					alert("Submit Succeed")	
					location.href="/Diet/";
				}
				else {
					alert(result.message)
				}
			}
		});
	
}
</script>
</html>